<script setup>
import Case from '../markdown/case.md';
import {ref} from "vue";
import {useRoute} from "vue-router";

const route = useRoute()
const active = ref("feng")
const scrollbar = ref(null)
const handle = (e) => {
  let target = document.getElementById(e.props.name).offsetTop
  scrollbar.value.setScrollTop(target);
}
const scroll = ({scrollTop}) => {
  let fengHeight = document.getElementById("feng").offsetTop
  let youHeight = document.getElementById("you").offsetTop
  let dongHeight = document.getElementById("dong").offsetTop
  let zhongyuanHeight = document.getElementById("zhongyuan").offsetTop
  let chewangHeight = document.getElementById("chewang").offsetTop
  let dianshangHeight = document.getElementById("dianshang").offsetTop
  let govHeight = document.getElementById("gov").offsetTop
  if (scrollTop > fengHeight && scrollTop <= youHeight - 50) {
    active.value = 'feng';
  } else if (scrollTop > youHeight && scrollTop <= dongHeight - 50) {
    active.value = 'you';
  } else if (scrollTop > dongHeight && scrollTop <= zhongyuanHeight - 50) {
    active.value = 'dong'
  } else if (scrollTop > zhongyuanHeight && scrollTop <= chewangHeight - 50) {
    active.value = 'zhongyuan'
  }else if (scrollTop > chewangHeight && scrollTop <= dianshangHeight - 50) {
    active.value = 'chewang'
  }else if (scrollTop > dianshangHeight && scrollTop <= govHeight - 50) {
    active.value = 'dianshang'
  }else if (scrollTop > govHeight - 50) {
    active.value = 'gov'
  }
}
</script>
<template>
  <el-backtop target=".demo-tree-scrollbar .el-scrollbar__wrap"></el-backtop>
  <el-scrollbar class="demo-tree-scrollbar" ref="scrollbar" style="height: 100%" @scroll="scroll">
    <div class="back">
      <el-tabs @tab-click="handle" v-model="active" tab-position="left" style="position: absolute; height:100%;text-align: left;
  margin-right: 30px">
        <el-tab-pane label="锋启汇信" name="feng">
        </el-tab-pane>
        <el-tab-pane label="友空间" name="you">
        </el-tab-pane>
        <el-tab-pane label="东田数码" name="dong">
        </el-tab-pane>
        <el-tab-pane label="中原地产" name="zhongyuan">
        </el-tab-pane>
        <el-tab-pane label="车旺科技" name="chewang">
        </el-tab-pane>
        <el-tab-pane label="某电商企业" name="dianshang">
        </el-tab-pane>
        <el-tab-pane label="某政府企业" name="gov">
        </el-tab-pane>
      </el-tabs>
      <case style="text-align: left;margin-left: 150px"/>
    </div>
  </el-scrollbar>
</template>